<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0 ,user-scalable=no">
  <link rel="stylesheet" href="./css/normalize.css">
  <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
  <!-- <link rel="stylesheet" href="./css/bootstrap.min.css"> -->
  <link rel="stylesheet" href="./css/index.css">
  <link rel="stylesheet" href="./iconfont/iconfont.css">
  <title>Document</title>

</head>

<body>
  <div class="header">
    <div class="head">
      <a href="" class="log">
        <img src="./image/logo.jpg" alt="">
      </a>
      <div class="searth">
        <a href="./jframe/searth.html"><input type="text" value="搜索"></a>
      </div>
      <div class="my">
        <a href="./jframe/history-record.html"><i class="iconfont icon-lishixiao"></i></a>
        <a href="./jframe/more.html"><i class="iconfont icon-sandian"></i></a>
      </div>
    </div>
    <nav class="tab">
      <ul>
        <div data-name="tuijian" class="active">推荐</div>
        <div data-name="xinfanriman">新番日漫</div>
        <div data-name="xinfanguoman">新番国漫</div>
        <div data-name="dongmanfanju">动漫番剧</div>
        <div class="line"></div>
      </ul>
    </nav>
    <ul class="types" style="display: none;">
      <li data-id="zuixin">最新<i class="iconfont icon-xiajiantou"></i></li>
      <li data-id="leixing">类型<i class="iconfont icon-xiajiantou"></i></li>
      <li data-id="diqu">地区<i class="iconfont icon-xiajiantou"></i></li>
      <li data-id="yuyan">语言<i class="iconfont icon-xiajiantou"></i></li>
      <li data-id="nianfen">年份<i class="iconfont icon-xiajiantou"></i></li>
      <div data-id="zuixin" class="xiala zuixin">
        <p>最新</p>
        <p>人气</p>
        <p>评分</p>
      </div>
      <div data-id="leixing" class="xiala leixing">
        <p>全部</p>
        <p>搞笑</p>
        <p>运动</p>
        <p>励志</p>
        <p>武侠</p>
        <p>热血</p>
        <p>战斗</p>
      </div>
      <div data-id="diqu" class="xiala diqu">
        <p>全部</p>
        <p>日本</p>
      </div>
      <div data-id="yuyan" class="xiala yuyan">
        <p>全部</p>
        <p>日语</p>
      </div>
      <div data-id="nianfen" class="xiala nianfen">
        <p>2024</p>
        <p>2023</p>
        <p>2022</p>
        <p>2021</p>
      </div>
    </ul>
  </div>
  <div class="container">
    <div style="display:block ;" class="content-box tuijian">
      <div class="focus">
        <img src="./update/focus1.webp" alt="">
      </div>
      <nav class="nav">
        <ul>
          <a href="./jframe/quanbu.html">
            <img src="./image/quanbu.webp" alt="">
            <span>全部</span>
          </a>
          <a href="./jframe/bangdan.html">
            <img src="./image/bangdan.png" alt="">
            <span>榜单</span>
          </a>
          <a href="./jframe/zhuanti.html">
            <img src="./image/zhuanti.png" alt="">
            <span>专题</span>
          </a>
          <a href="./jframe/zhuifan.html">
            <img src="./image/zhuiju.webp" alt="">
            <span>追剧</span>
          </a>
        </ul>
      </nav>
      <div class="slide">
        <div class="slide-top">
          <div class="title"><i class="iconfont icon-shijianxuanze"></i>追番日历</div>
          <a href="./jframe/more.html">
            <div class="more">更多</div>
          </a>
        </div>
        <div class="slide-content">
          <!-- Swiper -->
          <div class="swiper mySwiper-one">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="jiufan">
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="jiufan">
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="jiufan">
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="jiufan">
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="jiufan">
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                  <a href="">
                    <img src="./update/focus.webp" alt="">
                    <div class="title">
                      <p>花野井君和相思病</p>
                      <p>周一</p>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <a href="">更多></a>
              </div>
            </div>
            <!-- <div class="swiper-pagination"></div> -->
          </div>
        </div>
      </div>
      <div class="recommend">
        <div class="title">
          <i class="iconfont icon-tuijianfuwu"></i>
          站内推荐
        </div>
        <div class="re-content">
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
          <a href="">
            <img src="./update/focus.webp" alt="">
            <h4>命运之夜111111111</h4>
          </a>
        </div>
      </div>
      <div class="monthlist">
        <div class="monthlist-top">
          <div class="title">
            <i class="iconfont icon-bangdan1"></i>
            本月榜单
          </div>
          <a href="./jframe/more.html" class="more">
            <div class="more">
              更多
            </div>
          </a>
        </div>
        <div class="monthlist-content">
          <!-- Swiper -->
          <div class="swiper mySwiper-two">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <div class="title">新番日漫榜</div>
                <div class="swiper-content">
                  <a href="">
                    <h3>1</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>我独自升级</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>2</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>为美好的世界献上祝福 </p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>3</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>关于我转生变成史莱姆这件事</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="title">新番国漫榜</div>
                <div class="swiper-content">
                  <a href="">
                    <h3>1</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>我独自升级</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>2</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>为美好的世界献上祝福 </p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>3</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>关于我转生变成史莱姆这件事</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="title">动漫番剧榜</div>
                <div class="swiper-content">
                  <a href="">
                    <h3>1</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>我独自升级</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>2</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>为美好的世界献上祝福 </p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>3</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>关于我转生变成史莱姆这件事</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <div class="title">剧场动漫榜</div>
                <div class="swiper-content">
                  <a href="">
                    <h3>1</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>我独自升级</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>2</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>为美好的世界献上祝福 </p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                  <a href="">
                    <h3>3</h3>
                    <img src="./update/focus.webp" alt="">
                    <div class="name">
                      <p>关于我转生变成史莱姆这件事</p>
                      <div class="hot">
                        <i class="iconfont icon-redu"></i>
                        <p>17498</p>
                      </div>
                    </div>
                  </a>
                </div>
              </div>
              <div class="swiper-slide">
                <a href="">更多></a>
              </div>
            </div>
            <!-- <div class="swiper-pagination"></div> -->
          </div>

        </div>

      </div>
      <div class="guessyoulove">
        <div class="guess-top">
          <div class="title">
            <i class="iconfont icon-cainixihuan"></i>
            猜你喜欢
          </div>
          <a href="./jframe/more.html" class="change">换一换</a>
        </div>
        <div class="guess-content">
          <div class="content-left">
            <a href="">
              <img src="./update/focus.webp" alt="">
              <p>痴迷于魔法的主角再一次魔法决斗中被有着更高贵的</p>
            </a>
          </div>
          <div class="content-right">
            <a href="">
              <img src="./update/focus.webp" alt="">
              <p>无职转生到了...</p>
            </a>
            <a href="">
              <img src="./update/focus.webp" alt="">
              <p>为美好的世界献上祝福</p>
            </a>
          </div>
        </div>
      </div>
    </div>
    <div class="content-box xinfanriman">
      <div class="content">
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
      </div>
    </div>
    <div class="content-box xinfanguoman">
      <div class="content">
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
      </div>
    </div>
    <div class="content-box dongmanfanju">
      <div class="content">
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
        <a href="">
          <img src="./update/focus.webp" alt="">
          <p class="tital">身为魔王的我被身为贵族</p>
        </a>
      </div>
    </div>
  </div>

  <!-- </div>
    </div> -->

  <div class="foot">
    <a href="./index.html" class="shouye">
      <i class="iconfont icon-shouye"></i>
      <span>首页</span>
    </a>
    <a href="./jframe/searthvedio-for-img.html" class="shoufan">
      <i class="iconfont icon-zuqiu"></i>
      <span>以图搜番</span>
    </a>
    <a href="./jframe/my.html" class="my">
      <i class="iconfont icon-wode"></i>
      <span>我的</span>
    </a>
  </div>


  <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
  <script src="./js/index.min.js"></script>
  <!-- <script src="./js/bootstrap.min.js"></script> -->
  <script src="./js/index.js"></script>
  <script>
    (function () {
      var swiper = new Swiper('.swiper', {
        direction: 'horizontal',
        mousewheel: true,
        mousewheelSensitivity: 1, // 每次滚动项目的数量
        freeMode: true,
        freeModeMomentumRatio: 0.5,
        freeModeMomentumBounce: 0.4,
        freeModeMomentumBounceRatio: 0.4,
        onSwiper: function () {
          var swiper = this;
          var scrollContainer = swiper.$el[0];

          scrollContainer.addEventListener('wheel', function (e) {
            e.preventDefault();
            var delta = e.deltaY > 0 ? 1 : -1;
            swiper.slideNext(delta); // 根据滚动方向滑动Swiper
          });
        }
      });
      var swiper1 = new Swiper(".mySwiper-one", {
        slidesPerView: 1.73,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
      var swiper = new Swiper(".mySwiper-two", {
        slidesPerView: 1.73,
        spaceBetween: 30,
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    })()
  </script>
</body>

</html>